<template>
  <div class="outerBox" >
    <headerBox :centerWidth="centerWidth" :countyTotal="countyTotal" :setLength="setLength" :title_name="title_name" ref="headerBox"
    ></headerBox>
    <section class="mainbox" v-if="showBox">
      <div class="funBtns">
        <img class="Home" src="../../assets/images/home.png" @click="backHome" v-if="!showItems.show2">
        <img class="goAhead" src="../../assets/images/goAhead.png" @click="goAhead" v-if="!showItems.show2">
      </div>
      <div class="left">
        <left_part1 ref="left_part1" v-if="showItems.show1" :partWidth="partWidth" :centerHeight="centerHeight"></left_part1>
        <left_part2 ref="left_part2" v-if="!showItems.show1" :partWidth="partWidth" :centerHeight="centerHeight"></left_part2>
      </div>
      <div class="center" ref="center" :style="{width:screenHeight+'px',height: centerHeight+'px'}" v-loading="loading"
           :element-loading-background="bgColor" element-loading-text="拼命加载中"
      >
        <div class="numbers">
          <div class="number"
               :style="{background:'url('+ number_bg + ')',backgroundSize: '100% 100%'}"
          >
            <span>产业发展指数</span>
            <p>{{ developmentIndex != undefined ?  developmentIndex.developmentIndex : "0000"}}</p>
          </div>
          <div class="number"
               :style="{background:'url('+ number_bg + ')',backgroundSize: '100% 100%'}"
          >
            <span>产业规模</span>
            <p>{{ developmentIndex != undefined ?  developmentIndex.industrialScale : "0000" }}</p>
          </div>      <div class="number"
               :style="{background:'url('+ number_bg + ')',backgroundSize: '100% 100%'}"
          >
            <span>产业环境</span>
            <p>{{ developmentIndex != undefined  ?  developmentIndex.industrialEnvironment : "0000" }}</p>
          </div>
        </div>
        <map-box  :centerHeight="centerHeight" :centerWidth="centerWidth" ref="mapBox" :changeTuglie="changeTuglie" :pointData="marksList" :cityCode="cityCode"
                 :isCyty1="isCity1" :cityName="cityName"
                 @handleClickRegion="handleClickRegion" :getDetailInfo="getDetailInfo" @loadingSuccess="loadingSuccess"
                 @showDetail="showDetail"
                 :showAll="showAll" @resetCityInfo="resetCityInfo"
                 @changeTitle="changeTitle"
        ></map-box>
        <div class="Tuglie" v-if="isHome">
          <div class="Tuglie-item">
            <span></span>
            <p>主城中心城区</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>主城西部新区</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>主城南部新区</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>主城东部新区</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>渝东北三峡库区</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>渝东南武陵山区</p>
          </div>
        </div>
        <div class="Tuglie Tuglie2" v-else>
          <div class="Tuglie-item">
            <span></span>
            <p>原材料企业</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>制造业企业</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>施工企业</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>物流企业</p>
          </div>
          <div class="Tuglie-item">
            <span></span>
            <p>建筑服务业</p>
          </div>
        </div>
      </div>
      <div class="right" :style="{width:partWidth+'px'}">
        <right_part1 ref="right_part1" v-if="showItems.show1"  :centerWidth="centerWidth"  :centerHeight="centerHeight"></right_part1>
        <right_part2 ref="right_part2" v-if="!showItems.show1"  :centerWidth="centerWidth"  :centerHeight="centerHeight"></right_part2>
      </div>
    </section>
    <footerBox ref="footerBox" :cityCode="cityCode" :linksList="linksList"/>
  </div>

</template>
<script>
import {
  screenHeight, screenWidth
} from '@/utils/utils'
import MapBox from '@/components/Map2/Map2'
import footerBox from '@/components/footer'
import Left_part1 from '@/components/HomePart/left_part1'
import Left_part2 from '@/components/HomePart/left_part2'
import Right_part1 from '@/components/HomePart/right_part1'
import Right_part2 from '@/components/HomePart/right_part2'
import { getCountyCount, getStatistics1, queryMarks } from '@/api/system/marks'
import { getDicts } from '@/api/system/dict/data'
import screenfullBox from '@/components/Screenfull/index'
import { bgColor } from '@/utils/globalCss'
import headerBox from '@/components/HomePart/header_top'
import { listDevelopmentIndex, listDevelopmentIndexAll, listLinks } from '@/api/system/city'
import { citys, citys2 } from '@/utils/citys'

let value = false
export default {
  name: 'Home',
  components: {
    Left_part1,
    Left_part2,
    Right_part1,
    Right_part2,
    MapBox,
    footerBox,
    screenfullBox,
    headerBox
  },
  data() {
    return {
      showItems: {
        show1: true,
        show2: true
      },
      //加载中
      loading: true,
      isFullscreen: true,
      bgColor: bgColor,
      //标题名称
      title_name: '',
      header_img: require('../../assets/images/head_bg.png'),
      panel_img: require('../../assets/images/line(1).png'),
      img1: require('../../assets/images/map.png'),
      img2: require('../../assets/images/jt.png'),
      img3: require('../../assets/images/lbx.png'),
      img4: require('../../assets/images/icosjx.png'),
      bg_img: require('../../assets/images/bg.jpg'),
      cur_img: require('../../assets/images/pointer.png'),
      number_bg: require('../../assets/images/number_bg.png'),
      //当前时间
      currentTime: null,
      showBox: false,
      //屏幕高度
      screenHeight: null,
      showAll: true,
      cityCode: "",
      cityName: null,
      type: null,
      isCity1: false,
      //头部高度
      headerHeight: null,
      //中间内容高度
      centerHeight: null,
      //两边的宽度
      partWidth: null,
      //中间内容宽度
      centerWidth: null,
      //公司标记坐标原点
      marksList: [],
      //顶部描述信息列表
      linksList: [],
      isHome: true,
      countyTotal: 0,
      //发展指数对湘
      developmentIndex:{},
      cityList:[],
    }
  },
  beforeRouteEnter(to, from, next) {
    window.document.body.style.backgroundColor = '#030D48'
    next()
  },
  created() {
    // window.addEventListener('resize', () => {
    //   this.screenHeight = screenHeight()
    // })
    this.screenHeight = screenHeight()

    this.cityCode = this.$route.query.cityCode
    this.cityName = this.$route.query.cityName
    this.type = this.$route.query.type
    if (this.cityCode) {
      this.isCity = true
    }
    this.title_name = this.$route.query.cityName
    console.log(this.title_name,"this.title_name")
    if(this.cityName){
      // this.title_name = this.cityName.substring(0,this.cityName.length - 1)
    }
    this.getTitleInfo(500000)
    this.getCountyTotal()
    this.getDevelopmentIndex(500000)
  },

  mounted() {
    this.showBox = true
    const headerHeight = document.querySelector('header').offsetHeight
    this.centerHeight = screenHeight() - headerHeight * 2
    window.onresize = () => (() => {
      const headerHeight = document.querySelector('header').offsetHeight
      this.centerHeight = screenHeight() - headerHeight * 2
      this.setLength()
    })();
    this.$nextTick(() => {
      this.setLength()
    })
  },

  destroyed() {

  },
  watch: {
    $route(to, from) {
      //组件加载完成后触发getMarksList
      // const code = this.$route.query.cityCode
      // this.getMarksList(code)

    }
  },
  methods: {
    //索取所有城市发展指数
    getAllIndex(cityCode){
      listDevelopmentIndexAll(cityCode).then(res => {
        this.cityList = res.rows
        this.city1List = citys
        this.city2List = citys2
        this.city1List.forEach(item => {
          this.cityList.forEach(item1 => {
            if(item.cityCode == item1.cityCode){
              item.developmentIndex = item1.developmentIndex
            }
          })
        })
        this.city2List.forEach(item => {
          this.cityList.forEach(item1 => {
            if(item.cityCode == item1.cityCode){
              item.developmentIndex = item1.developmentIndex
            }
          })
        })
      })
    },
    setLength(){
      this.$refs.headerBox.setWidth(this.centerWidth)
      this.$refs.footerBox.setWidth(this.centerWidth)
      this.centerWidth = this.$refs.center.offsetWidth
      this.partWidth = ( screenWidth() - this.centerWidth ) / 2
      this.$refs.headerBox.setWidth(this.centerWidth)
      this.$refs.footerBox.setWidth(this.centerWidth)
    },
    //企业产业总数
    getCountyTotal(cityCode) {
      getCountyCount({
        cityCode
      }).then(res => {
        this.countyTotal = res.amount
      })
    },
    hideBoxFn() {
      const headerHeight = document.querySelector('header').offsetHeight
      this.centerHeight = screenHeight() - headerHeight * 2
    },
    //转换公司坐标类型
    changeTypeId(id) {
      if (id == 1) {
        return 1
      } else if (id == 7) {
        return 2
      } else if (id == 12) {
        return 3
      } else if (id == 17) {
        return 4
      } else if (id == 22) {
        return 5
      }
    },
    //获取标记坐标
    getMarksList(cityCode) {
      const params = {
        cityCode
      }
      queryMarks(params).then(response => {
        //设置vuex中的markList
        this.marksList = response.rows.map(item => {
          return {
            company_name: item.companyName,
            introduction: item.companyProfile,
            type: this.changeTypeId(item.categoryParentId),
            style: this.changeTypeId(item.categoryParentId) - 1,
            lnglat: [item.longitude, item.latitude],
            company_level: item.companyLevel,
            categoryParentId: item.categoryParentId
          }
        })
        this.$nextTick(() => {
          // this.$refs.mapBox.homeMassMaker(this.marksList)
          this.$refs.mapBox.setMassMaker()
        })
      })
    },

    //前进
    goAhead() {
      if (this.cityCode) {
        this.$router.push({
          path: '/detail', query: {
            cityCode: this.cityCode,
            cityName: this.cityName,
            type: this.type
          }
        })
      }
    },
    //点击外部--重置城市信息--取消前进功能
    resetCityInfo() {
      this.cityCode = null
      this.cityName = null
      this.marksList = []
      this.getDevelopmentIndex()
      this.$refs.mapBox.clearMarks()
      this.$router.push({ query: {} })
    },

    backHome() {
      this.$router.push({ query: {} })
      // this.$router.go(0);
      this.$refs.mapBox.backHome()
      this.$refs.mapBox.clearMarks()
      this.isHome = true
      this.$nextTick(() => {
        this.setLength()
      })
    },
    showDetail() {
      this.showAll = false
    },
    //点击区域
    handleClickRegion(e) {
      let code = e.adcode
      this.getDevelopmentIndex(e.adcode)
      this.getTitleInfo(e.adcode)

      if (code == 500000) {
        this.showItems.show1 = true
        this.showItems.show2 = true
      } else {
        this.showItems.show1 = false
        this.showItems.show2 = false

        const code = this.$route.query.cityCode
        this.getMarksList(code)
      }
    },
    //地图加载完成
    loadingSuccess() {
      this.loading = false
      this.$refs.mapBox.addLotPoint()
    },
    changeTitle(name, code) {
      this.title_name = name
      this.getCountyTotal(code)
    },
    //获取顶部描述信息
    getTitleInfo(cityCode) {
      listLinks(cityCode).then(res => {
        this.linksList = res.rows
      })



    },
    getDevelopmentIndex(cityCode){
      listDevelopmentIndex(cityCode).then(res => {
        this.developmentIndex = res.rows[0]
      })
    },
    changeTuglie() {
      this.isHome = !this.isHome
    },
    //获取图表详细信息
    getDetailInfo(cityCode) {
      localStorage.setItem('cityCode', cityCode)
      if (cityCode) {
        // getStatistics1({cityCode}).then(res => {

        // })
      }

    }
  }

}
</script>
<style lang="scss" scoped>
.outerBox {
  min-width: 1000px;
}

.funBtns {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 110px;
  justify-content: space-between;
  z-index: 99999;
}

.goAhead {
  z-index: 99999;
  color: #fff;
  line-height: 50px;
  width: 50px;
  opacity: .5;
  cursor: pointer;
}

.Home {
  z-index: 99999;
  color: #fff;
  line-height: 50px;
  width: 50px;
  opacity: .5;
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;

}


@font-face {
  font-family: electronicFont;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.15;
}

header {
  position: relative;
  height: 1.3rem;
  background-size: 100% 100%;

  h2 {
    position: absolute;
    top: .35rem;
    left: .5rem;
    font-size: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
  }

  .showTime {
    position: absolute;
    display: flex;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.35rem;
    color: rgba(255, 255, 255, 0.7);

    .full-screen-box {
      margin-right: .3rem;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    h1 {
      padding-top: 0.1rem;
      font-size: 0.55rem;
      color: #fff;
      text-align: center;
    }

    p {
      text-align: center;
      color: #fff;
      font-size: .3rem;
    }
  }
}

.map {
  width: 100%;
  height: 100%;
}

.mainbox {
  min-width: 1024px;
  padding: 0 0.125rem;
  display: flex;
  position: relative;

  .left {
    flex: 1;
  }

  .center {
    position: relative;

    .Tuglie {
      position: absolute;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      width: 2.5rem;
      padding-left: .3rem;

      .Tuglie-item {
        display: flex;
        line-height: .5rem;
        align-items: center;

        span {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          margin-right: .3rem;
        }

        &:nth-child(1) {
          span {
            background: #DF212E;
          }
        }

        &:nth-child(2) {
          span {
            background: #C6D9A0;
          }
        }

        &:nth-child(3) {
          span {
            background: #7B9BDC;
          }
        }

        &:nth-child(4) {
          span {
            background: #E6CD31;
          }
        }

        &:nth-child(5) {
          span {
            background: #93C4D3;
          }
        }

        &:nth-child(6) {
          span {
            background: #BBABCF;
          }
        }
      }
    }

    .Tuglie2 {
      .Tuglie-item {
        &:nth-child(1) {
          span {
            background: #31A0E0 !important;
          }
        }

        &:nth-child(2) {
          span {
            background: #D72F00;
          }
        }

        &:nth-child(3) {
          span {
            background: #F4EC2A;
          }
        }

        &:nth-child(4) {
          span {
            background: #E0E0E0;
          }
        }

        &:nth-child(5) {
          span {
            background: #3ADD93;
          }
        }
      }

    }
  }

  .right {
    flex: 1;
  }

}

.mainbox .column:nth-child(3) {
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
  position: relative;

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #030D48;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    i {
      font-size: 30px;
    }

  }
}

.left2 {
  .panel {
    transition: all 1s;
    position: relative;
    height: 2.555rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    padding: 0 0.1875rem 0.5rem;
    margin-bottom: 0.1875rem;

    &:nth-child(4) {
      margin-bottom: 0;
    }
  }

  .panel .chart {
    height: 1.9rem;
    position: relative;
    z-index: 999;
  }
}

.column4 {
  img {
    width: 100%;
    height: 100%;
  }
}

.numbers {
  display: flex;
  position: absolute;
  z-index: 99999;
  left: .2rem;
  top: .2rem;

  .number {
    margin-right: .1rem;
    width: 2rem;
    text-align: center;
    padding: .32rem 0;
    line-height: 120%;

    &:nth-child(1) {
      span {
        color: #5ee6ff;
        text-shadow: 0 0 .1rem #5ee6ff;
      }

      p {
        color: #5ee6ff;
        text-shadow: 0 0 .1rem #5ee6ff;
      }
    }

    &:nth-child(2) {
      span {
        color: #ffd966;
        text-shadow: 0 0 .1rem #ffd966;
      }

      p {
        color: #C7C600;
        text-shadow: 0 0 .1rem #C7C600;
        font-size: .4rem !important;
      }
    }

    &:nth-child(3) {
      span {
        color: #ca9eef;
        text-shadow: 0 0 .1rem #ca9eef;
      }

      p {
        color: #ca9eef;
        text-shadow: 0 0 .1rem #ca9eef;
      }
    }

    &:nth-child(4) {
      span {
        color: #33AB7F;
        text-shadow: 0 0 .1rem #33AB7F;
      }

      p {
        color: #33AB7F;
        text-shadow: 0 0 .1rem #33AB7F;
      }
    }

    span {
      font-size: .3rem;
    }

    p {
      font-size: .45rem;

      font-weight: bold;
      padding-top: .2rem;
      font-family: electronicFont;
    }
  }
}
</style>
